<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div style="color: red;background-color: red;"></div>
		<input type="button" value="取消" onclick="cancel()" />
		
		<script type="text/javascript">
			window.onload = function() {
				// dom对象
				var dv = document.getElementsByTagName('div')[0];
				dv.addEventListener('click', function() {
					console.log('click1');
					// dom对象操作style属性的样式
					dv.style.backgroundColor = 'pink';
					// dv.style.width = '400px';
					// this代表正在加事件的这个对象dv
					this.style.width = '400px';
				});
				dv.addEventListener('click', function() {
					console.log('click2');
					this.style.height = '400px';
				});
				
				dv.addEventListener('mouseover', f1);
				dv.addEventListener('mouseover', f2);
			}
			
			function f1() {
				console.log('f1()');
			}
			function f2() {
				console.log('f2()');
			}
			
			function cancel() {
				var dv = document.getElementsByTagName('div')[0];
				dv.removeEventListener('mouseover', f1);
			}
		</script>
	</body>
</html>
